<template>
  <div class="typing-effect">
    <span>{{ text }}</span>
    <span
      class="cursor"
      :style="{ visibility: cursorVisible ? 'visible' : 'hidden' }"
      >|</span
    >
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const cursorVisible = ref(true)

// 每隔一定时间切换光标的可见性
const toggleCursor = () => {
  cursorVisible.value = !cursorVisible.value
}

const intervalId = setInterval(toggleCursor, 500) // 每隔500毫秒切换一次

onMounted(() => {
  // 组件挂载后开始动画
})

onUnmounted(() => {
  // 组件卸载后停止动画
  clearInterval(intervalId)
})
</script>

<style scoped>
.typing-effect {
  display: inline-block;
  position: relative;
  font-family: monospace; /* 可选，让文本看起来像是打字机输出的 */
}

.cursor {
  display: inline-block;
  margin-left: 2px; /* 根据需要调整光标与文本的间距 */
  animation: blink 1s step-end infinite;
  font-weight: 700;
  /* 以下是替代方案，使用Vue的响应式特性控制光标显示 */
  /* visibility: hidden; */
  /* opacity: 0; */
  /* transition: opacity 0.5s; */
}

/* 如果不使用Vue的响应式控制光标，可以使用下面的CSS动画 */
/* @keyframes blink {  
    50% { opacity: 0; }  
  } */
</style>
